<template>
  <div class="index">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <!-- 操作 start -->
    <div class="box">
      <div class="box-content">
        <el-tabs v-model="activeName">
          <!-- 基础信息 -->
          <el-tab-pane
            label="基础信息"
            name="first"
            class="content-info"
            v-if="oemUserInfo.organCode"
          >
            <div class="content-item">
              <span style="width: 40%"
                >用户编号：{{
                  oemUserInfo.organCode.slice(oemUserInfo.organCode.length - 28)
                }}</span
              >
              <span style="width: 40%"
                >用户账号：{{ oemUserInfo.userName }}</span
              >
            </div>
            <el-divider />
            <div class="content-item">
              <span style="width: 40%"
                >用户名称：{{ oemUserInfo.organName }}</span
              >
              <span style="width: 40%"
                >上级名称：{{ oemUserInfo.parentOrganName }}</span
              >
            </div>
            <el-divider />
            <div class="content-item">
              <span style="width: 40%"
                >可使用设备数：{{ oemUserInfo.dsTotalNum - oemUserInfo.dsUsedNum }}</span
              >
              <span style="width: 40%"
                >有效期结束时间：{{ oemUserInfo.dsExpires.slice(0, 10) }}</span
              >
            </div>
            <el-divider />
            <div class="content-item">
              <span style="width: 40%"
                >创建时间：{{ oemUserInfo.createTime }}</span
              >
              <span style="width: 40%"
                >到期时间：{{ oemUserInfo.endTime }}</span
              >
              <span style="width: 40%">备注：{{ oemUserInfo.remark }}</span>
            </div>
            <el-divider />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 操作 end -->
  </div>
</template>

<script>
import ModuleTitle from "@/components/content/ModuleTitle.vue";
import { mapState } from "vuex";
export default {
  name: "index",
  data() {
    return {
      moduleTitle: "企业信息",
      activeName: "first"
    };
  },
  mounted() {},
  computed: {
    ...mapState(["oemUserInfo"])
  },
  methods: {},
  components: { ModuleTitle }
};
</script>

<style scoped>
.box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  flex-direction: row;
  background-color: #ffffff;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.box-content {
  width: 100%;
  padding: 20px;
}
.content-info {
  padding: 20px 25px;
  color: #666666;
  font-size: 14px;
}
.content-item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  line-height: 48px;
  padding: 0 35px;
}
</style>
